<template>
  <div :class="getClass" :style="getStyle">
    <div class="rect-left flex items-center w-16 h-16">
      <img :src="data.icon" class="w-full h-full" />
    </div>
    <div class="rect-right ml-4">
      <div class="font-bold">
        ¥
        <span class="price">{{ data.value || 0 }}</span>
      </div>

      <span class="text">{{ data.name }}</span>
    </div>
  </div>
</template>

<script lang="ts" setup name="RectCardHorizontal">
  import { onMounted, computed } from 'vue';
  import type { CSSProperties } from 'vue';

  import { setStyle } from '/@/utils/cssUtil';
  import { ModuleConfig, ModuleValue } from './types';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { getImageUrl } from './util';

  const { prefixCls } = useDesign('RectCardHorizontal');
  const props = withDefaults(
    defineProps<{
      config?: ModuleConfig;
      data?: ModuleValue;
    }>(),
    {
      config: () => ({
        className: '',
        width: 314,
        height: 100,
        padding: [18, 0, 0, 40],
      }),
      data: () => ({
        value: '128',
        icon: getImageUrl('month1'),
        name: '本月施工费用',
      }),
    },
  );
  const getClass = computed(() => {
    const { className } = props.config;

    return [prefixCls, 'flex', className];
  });
  const getStyle = computed((): CSSProperties => {
    return setStyle(props.config);
  });
  onMounted(() => {});
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-RectCardHorizontal';

  .@{prefix-cls} {
    .text {
      color: @text-color-bold;
      font-size: 14px;
    }

    .price {
      color: @text-color-bold;
      font-size: 20px;
      font-weight: 700;
    }
  }
</style>
